<template>
  <div class="Raporderdetail">
    <section class="cardbox">
      <el-row :gutter="24" class="card_wrap">
        <el-col :span="24">
          <el-card class="box-card" shadow="hover">
            <div slot="header" class="clearfix">
              <span class="title">我的订单</span>
            </div>
            <div class="text item">
              <div class="order_detail">
                <ul class="order_content">
                  <li>{{cloudtitleupgrade}}</li>
                  <li>{{cloudShow}}</li>
                  <li class="money">{{money}}元</li>
                </ul>
              </div>
              <div class="clearfix_line"></div>
              <div class="invoice">
                <div class="invoiceTop">
                  <span>发票</span>
                  <ul>
                    <li>电子发票</li>
                    <li>个人</li>
                    <li>商品明细</li>
                    <li>修改></li>
                  </ul>
                </div>
                <div class="invoiceBottom">
                  <span class="userinvo">使用优惠券</span>
                  <ul>
                    <li>
                      商品总价：
                      <span>{{money}}元</span>
                    </li>
                    <li>
                      活动优惠：
                      <span>0元</span>
                    </li>
                    <li>
                      优惠劵抵扣：
                      <span>0元</span>
                    </li>
                    <li class="totalmoney">
                      应付总金额：
                      <span>{{money}}元</span>
                    </li>
                  </ul>
                </div>
                <div class="clearfix_line"></div>
                <div class="btn">
                  <el-button type="primary" @click="settlement">去结算</el-button>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </section>
  </div>
</template>

<script type="text/javascript" src="../../../api/usermg/subpayment/orderdetail.js"></script>

<style lang="scss">
.Raporderdetail {
  flex: 1;
  > section {
    &.cardbox {
      height: auto !important;
      padding-bottom: 17px;
      .card_wrap {
        border-radius: 5px;
        .el-card {
          border-radius: 5px;
          background-color: #1f2548;
          border: 1px solid #1f2548;
          .el-card__header {
            border-bottom: 1px solid #4b506c;
            .title {
              margin-top: 0%;
              margin-left: 0%;
              font-size: 2rem;
              color: #9da4af;
              font-weight: 500;
              justify-content: center;
              align-items: center;
            }
          }
          .el-card__body {
            .text {
              .order_detail {
                .order_content {
                  color: #9da4af;
                  display: flex;
                  flex-direction: row;
                  justify-content: space-between;
                  font-size: 2rem;
                  .money {
                    color: #f8666a;
                  }
                }
              }
            }
            .clearfix_line {
              border-bottom: 1px solid #9da4af;
              margin-top: 10px;
              border-collapse: collapse;
              border-width: 1px;
            }
            .invoice {
              .invoiceTop {
                color: #fff;
                display: flex;
                flex-direction: row;
                padding: 25px 0px;
                ul {
                  display: flex;
                  flex-direction: row;
                  margin-left: 8%;
                  li {
                    color: #9da4af;
                    padding: 0px 10px;
                  }
                }
              }
              .invoiceBottom {
                color: #fff;
                display: flex;
                flex-direction: row;
                .userinvo {
                  background: url(../../../assets/imgs/add.png) no-repeat left 0;
                  color: #9da4af;
                  padding-left: 26px;
                  padding-top: 2px;
                  width: 91%;
                }
                ul {
                  text-align: end;
                  li {
                    padding: 10px 0px;
                    color: #9da4af;
                    font-size: 16px;
                    span {
                      color: #f8666a;
                    }
                  }
                  .totalmoney {
                    margin-top: 40%;
                  }
                }
              }
              .btn {
                float: right;
                margin: 21px 0px;
                .el-button {
                  width: 200px;
                  background-color:#44ABF5;
                  border:1px solid #44ABF5;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
